<!--基本雷达图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import BaseRadarChart from './BaseRadarChart.js'

  const _this = {
    name: 'BaseRadarChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '3.0',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          legend: PnDesigner.buildLegendConfigData(),
          radar: {
            radius: '70%',
            name: {
              show: true,
              textStyle: {
                color: "rgba(250,250,250,0.6)",
                fontSize: 12
              }
            },
            shape: 'circle', //形状
            splitArea: {
              show: false,
              areaStyle: {
                color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], //圆环颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(250,250,250,0.6)', //圆线
                width: 1,
                type: 'solid',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(250,250,250,0.6)', // 分割线
                width: 1,
                type: 'solid'
              }
            },
            indicator: {
              min: 0,
              max: 5000
            }
          },
          series: [
            BaseRadarChart.buildSeriesObj('系列1'),
            BaseRadarChart.buildSeriesObj('系列2'),
          ]
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'value',
            remark: '内容'
          },
          {
            field: 'series',
            remark: '系列名'
          }
        ],
        ds_resultObj: [
          {"label": "指标A", "value": 430, "series": "系列1"},
          {"label": "指标B", "value": 1000, "series": "系列1"},
          {"label": "指标C", "value": 2800, "series": "系列1"},
          {"label": "指标D", "value": 3500, "series": "系列1"},
          {"label": "指标E", "value": 5000, "series": "系列1"},
          {"label": "指标F", "value": 1900, "series": "系列1"},
          {"label": "指标A", "value": 500, "series": "系列2"},
          {"label": "指标B", "value": 1400, "series": "系列2"},
          {"label": "指标C", "value": 2800, "series": "系列2"},
          {"label": "指标D", "value": 3100, "series": "系列2"},
          {"label": "指标E", "value": 4200, "series": "系列2"},
          {"label": "指标F", "value": 2100, "series": "系列2"}
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          legend: PnDesigner.buildLegendChartOption(this.component.compConfigData.chartOption.legend),
          radar: [{
            radius: this.component.compConfigData.chartOption.radar.radius,
            name: {
              show: this.component.compConfigData.chartOption.radar.name.show,
              textStyle: {
                color: this.component.compConfigData.chartOption.radar.name.textStyle.color,
                fontSize: this.component.compConfigData.chartOption.radar.name.textStyle.fontSize
              }
            },
            indicator: [],
            center: ['50%', '50%'], // 位置
            shape: this.component.compConfigData.chartOption.radar.shape, //形状
            splitArea: {
              show: this.component.compConfigData.chartOption.radar.splitArea.show,
              areaStyle: {
                color: [
                  this.component.compConfigData.chartOption.radar.splitArea.areaStyle.color[0],
                  this.component.compConfigData.chartOption.radar.splitArea.areaStyle.color[1]
                ], //圆环颜色
              }
            },
            splitLine: {
              show: this.component.compConfigData.chartOption.radar.splitLine.show,
              lineStyle: {
                color: this.component.compConfigData.chartOption.radar.splitLine.lineStyle.color, //圆线
                width: this.component.compConfigData.chartOption.radar.splitLine.lineStyle.width,
                type: this.component.compConfigData.chartOption.radar.splitLine.lineStyle.type,
              }
            },
            axisLine: {
              show: this.component.compConfigData.chartOption.radar.axisLine.show,
              lineStyle: {
                color: this.component.compConfigData.chartOption.radar.axisLine.lineStyle.color, // 分割线
                width: this.component.compConfigData.chartOption.radar.axisLine.lineStyle.width,
                type: this.component.compConfigData.chartOption.radar.axisLine.lineStyle.type,
              }
            }
          }],
          series: [
            {
              name: '雷达图',
              type: 'radar',
              itemStyle: {
                color: ''
              },
              data: []
            }
          ]
        };

        this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'label').forEach(item => {
          option.radar[0].indicator.push({
            name: item.type,
            min: this.component.compConfigData.chartOption.radar.indicator
                ? this.component.compConfigData.chartOption.radar.indicator.min : 0,
            max: this.component.compConfigData.chartOption.radar.indicator
                ? this.component.compConfigData.chartOption.radar.indicator.max : 5000
          })
        });

        /*this.component.compConfigData.chartOption.series.forEach((item, index) => {
          let groupItem = this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series')[index];
          if (groupItem) {
            let values = [];
            let list = groupItem.list;
            option.radar[0].indicator.forEach(ind => {
              list.forEach(item => {
                if (ind.name == item.label) {
                  values.push(item.value)
                }
              })
            });

            option.series[0].data.push({
              name: item.name,
              symbolSize: item.symbolSize,
              itemStyle: {
                color: item.itemStyle.color
              },
              label: { // 单个拐点文本的样式设置
                normal: {
                  show: item.label.normal.show, // 单个拐点文本的样式设置。[ default: false ]
                  position: item.label.normal.position, // 标签的位置。[ default: top ]
                  distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                  color: item.label.normal.color, // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                  fontSize: item.label.normal.fontSize, // 文字的字体大小
                }
              },
              areaStyle: {
                normal: {
                  color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                      offset: 0,
                      color: item.areaStyle.normal.startColor ? item.areaStyle.normal.startColor : this.currentEchartThemeColors[7] // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: item.areaStyle.normal.endColor ? item.areaStyle.normal.endColor : this.currentEchartThemeColors[0] // 100% 处的颜色
                    }]
                  }
                }
              },
              value: values
            });
            option.legend.data.push(item.name)
          }

        });*/

        this.$PnUtil.groupArray(this.runCustomFilter(this.component.compConfigData.ds_resultObj), 'series').forEach((resultObjItem, index) => {
          if (resultObjItem) {
            let values = [];
            let list = resultObjItem.list;
            option.radar[0].indicator.forEach(ind => {
              list.forEach(item => {
                if (ind.name == item.label) {
                  values.push(item.value)
                }
              })
            });
            let item = this.component.compConfigData.chartOption.series[index];
            if (item) {
              option.series[0].data.push({
                name: item.name ? item.name : resultObjItem.type,
                symbolSize: item.symbolSize,
                itemStyle: {
                  color: item.itemStyle.color ? item.itemStyle.color : null
                },
                label: { // 单个拐点文本的样式设置
                  show: item.label.normal.show, // 单个拐点文本的样式设置。[ default: false ]
                  position: item.label.normal.position, // 标签的位置。[ default: top ]
                  distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                  color: item.label.normal.color, // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                  fontSize: item.label.normal.fontSize, // 文字的字体大小
                },
                areaStyle: {
                  color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                      offset: 0,
                      color: item.areaStyle.normal.startColor ? item.areaStyle.normal.startColor : this.currentEchartThemeColors[7] // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: item.areaStyle.normal.endColor ? item.areaStyle.normal.endColor : this.currentEchartThemeColors[0] // 100% 处的颜色
                    }]
                  }
                },
                value: values
              });
              option.legend.data.push(item.name ? item.name : resultObjItem.type)
            }else {
              option.series[0].data.push(Object.assign({
                value: values
              }, BaseRadarChart.buildSeriesObj(resultObjItem.type)))
              option.legend.data.push(resultObjItem.type)
            }
          }
        })

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
